<template>
  <div class="hello">
    <!--头部控件-->
     <van-sticky>
        <div class="titles">
          <div>
               <span @click="showPopup" class=" glyphicon glyphicon-th-list" aria-hidden="true" style="color:white;font-size:40px;"></span>    
          </div>
         <div class="myName">
             <van-image width="100%"    :src="require('../assets/name.png')">
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
             </van-image>
         </div>
        </div>
    </van-sticky>
     <!--左侧导航栏-->
        <van-popup v-model="show"  position="left" :style="{ height:'100%',width:'50%',background:'black'}">
           <van-image class="header" width="100%"    :src="require('../assets/header.jpg')" round>
           
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
           
           </van-image>
          
            <!--左侧个人信息展示-->
           <div style="height=8rem;text-algin:center" class="User">
              <div  class="UserName"><span>Coldfront</span></div>
              <div class="desCraption">
                <span style="margin-left:10px;color:#1ee49b;margin-bottom:10px;">积跬步，积小流</span>
                <span class="glyphicon glyphicon-fire" aria-hidden="true" style="color:hotpink;"></span>
              </div>
           </div>
           <hr/>
            <!--导航栏-->
           <div class="navBar-list">
              <div><span class="glyphicon glyphicon-play" aria-hidden="true" style="color:white;"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <router-link to="/home">博客首页</router-link>
              </div>
              <div><span class="glyphicon glyphicon-play" aria-hidden="true" style="color:white;"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <router-link to="/web">吐槽大会</router-link>
            </div>
              <div><span class="glyphicon glyphicon-play" aria-hidden="true" style="color:white;"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <router-link to="/myVlog">时光Time</router-link>
              </div>
              <div><span class="glyphicon glyphicon-play" aria-hidden="true" style="color:white;"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
               <router-link to="/qqMusic">在线音乐</router-link>
               </div>
              <div><span class="glyphicon glyphicon-play" aria-hidden="true" style="color:white;"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <router-link to="/photoGirl">电脑壁纸</router-link>
              </div>
              <div><span class="glyphicon glyphicon-play" aria-hidden="true" style="color:white;"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <router-link to="/blogSelf">关于站长</router-link>
              </div>
           </div>
        </van-popup>
      
  
  </div>
</template>

<script>
export default {
  name: 'Index',
  props: {
    msg: String
  },
  data(){
    return{
       activeKey:0,
       show: false,
    }
  },
  methods:{
     showPopup() {
      this.show = true;
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >
.hello{
  background-color:rgb(15, 14, 14);
}
.titles{
  background-color:black;
  display: flex;
}
.titles .myName img {
  width:60%;
  height:4.7rem;
  margin-left: auto;
  margin-right: auto;
}
.header img{
 
  margin: 0 auto;
  width: 8rem;
  border:3px solid rgb(236, 243, 237);
}
.User{
  text-align: center;
  margin-top: 5%;
 
}
.UserName{
  font-size: 2rem;
}
.desCraption{
  margin-top: 10px;
}
.navBar-list{
 text-align: center
}
.navBar-list div{
  height: 4rem;
  line-height: 4rem
}

</style>
